<template>
  <!--列表-->
  <router-exact-view name="verify">
    <div style="width: 100%" class="template-list-page-container">
      <div class="search-area">
        <search-form-container>
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="所属学期">
              <el-select v-model="searchForm.schoolTermId" placeholder="请选择所属学期">
                <el-option label="全部" :value="-1" />
                <el-option v-for="item in termOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="教师姓名">
              <el-input
                v-model="searchForm.teacherName"
                placeholder="请输入教师姓名"
              />
            </el-form-item>
            <el-form-item label="学生姓名">
              <el-input
                v-model="searchForm.studentName"
                placeholder="请输入学生姓名"
              />
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select v-model="searchForm.status" placeholder="请选择审核状态">
                <el-option label="全部" :value="-1" />
                <el-option v-for="item in recordStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="handlePageChange(1)"
              >查 询</el-button>
              <el-button @click="resetSearchForm">重 置</el-button>
            </el-form-item>
          </el-form>
        </search-form-container>
      </div>
      <my-table
        v-loading="loading"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :btn-options="btnOptions"
        title="送教提报列表"
        @page-change="handlePageChange"
      >
        <div slot="coverImg" slot-scope="scope">
          <img
            :src="scope.row.coverImg"
            style="width: 200px; height: 100px"
          >
        </div>
      </my-table>
    </div>
    <send-record-dialog
      :visible="visible"
      :is-verify="type === 'verify'"
      :detail="detailObj"
      @transferData="handleDialogEvent"
    />
  </router-exact-view>
</template>

<script>
import MyTable from '@/components/my-table/index'
import SearchFormContainer from '@/components/search-form-container/index'
import SendRecordDialog from '../components/send-record-dialog/index'
import RouterExactView from '@/components/routerExactView'
import { getVerifyList, verifyRecord, recordDetail, delRecord } from '@/api/task'
import { getAllTerm } from '@/api/basic'
import { sendRecordColumns } from '../columns'
import { recordStatusOptions } from '../attr'

export default {
  components: { RouterExactView, MyTable, SearchFormContainer, SendRecordDialog },
  data() {
    const that = this
    return {
      recordStatusOptions,
      termOptions: [],
      activeName: '1',
      /* 列表相关 */
      columns: sendRecordColumns,
      data: [],
      searchForm: {
        status: 0
      },
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      btnOptions: [
        {
          name: '详情',
          handler: function(row) {
            that.openRecordDialog(row, 'watch')
          }
        },
        {
          name: '审核',
          v_if: row => row.status === 0,
          handler: function(row) {
            that.openRecordDialog(row, 'verify')
          }
        },
        {
          name: '删除',
          v_if: row => row.status === 0,
          handler: function(row) {
            that.deleteRecord(row)
          }
        }
      ],
      // dialog配置
      visible: false,
      detailObj: {},
      type: 'watch' // watch 查看  verify 审核
    }
  },
  mounted() {
    if (this.$route.name === 'verify') {
      this.handlePageChange()
      this.getTermList()
    }
  },
  methods: {
    async deleteRecord(row) {
      const that = this
      this.$confirm('确定要删除该提报记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        try {
          const res = await delRecord({ id: row.outworkRecordId })
          if (res) {
            that.$message({
              message: `删除提报记录成功！`,
              type: 'success'
            })
            that.handlePageChange(that.pagination.current)
          }
        } catch (err) {
          console.log('接口出错')
        }
      })
    },
    async handleDialogEvent(type) {
      const that = this
      if (type === 'close') {
        this.visible = false
      } else if (type === 'verify') {
        try {
          const res = await verifyRecord({
            id: this.detailObj.outworkRecordId
          })
          if (res) {
            that.$message({
              message: `审核提报记录成功！`,
              type: 'success'
            })
            that.handlePageChange(that.pagination.current)
            that.visible = false
          }
        } catch (err) {
          console.log('接口出错')
        }
      }
    },
    async handlePageChange(current, size) {
      if (current) {
        this.pagination.current = current
      }
      if (size) {
        this.pagination.pageSize = size
      }
      this.loading = true
      try {
        const params = JSON.parse(JSON.stringify(this.searchForm || {}))
        if (!params.studentName) {
          delete params.studentName
        }
        if (!params.teacherName) {
          delete params.teacherName
        }
        if (!params.schoolTermId || params.schoolTermId === -1) {
          delete params.schoolTermId
        }
        if (params.status === -1) {
          delete params.status
        }
        const res = await getVerifyList({
          ...params,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        if (res && res.list) {
          this.data = res.list
          this.pagination = {
            current: res.pageNum,
            pageSize: res.pageSize,
            total: res.totalElements
          }
        }
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    resetSearchForm() {
      this.searchForm = {
        status: 0
      }
      this.handlePageChange(1)
    },
    openRecordDialog(row, type) {
      const that = this
      this.getRecordDetail(row.outworkRecordId, function(data) {
        that.type = type
        that.visible = true
        that.detailObj = data
        that.detailObj.teacherName = row.teacherName
        that.detailObj.studentName = row.studentName
        that.detailObj.schoolTermName = row.schoolTermName
      })
    },
    async getTermList() {
      try {
        const res = await getAllTerm({
          pageNum: 1,
          pageSize: 1000
        })
        if (res && res.length) {
          this.termOptions = res.map(v => ({
            label: v.name,
            value: v.id
          }))
        }
      } catch (err) {
        console.log(err)
      }
    },
    async getRecordDetail(id, cb) {
      try {
        const res = await recordDetail({ id })
        if (res) {
          cb(res)
        }
      } catch (err) {
        console.log('接口出错')
      }
    }
  }
}
</script>
<style scoped lang="less">
@import "../../common.css";
/* 查询条件容器的样式 */
.search-area {
  padding: 16px 16px 0;
  margin-bottom: 8px;
  background: #fff;
}
</style>
